<template>
  <view>
    <u-popup
      :show="props.modelValue"
      @close="popupClose"
      @open="openPopup"
      :closeable="true"
      :closeOnClickOverlay="false"
      safeAreaInsetBottom
      :round="10"
      :title="title"
      :titleStyle="{
        textAlign: 'left',
        fontSize: '36rpx',
        fontWeight: 'bold',
      }"
    >
      <view class="recharge-popup">
        <view class="recharge-options">
          <!-- 充值选项1 -->
          <view
            class="recharge-item"
            :class="{ active: item.selected }"
            @click="handleRecharge(item, index)"
            v-for="(item, index) in chongzhilist"
            :key="index"
          >
            <view class="amount">¥{{ item.value }}</view>
            <view class="bonus">赠送¥{{ item.zeng_value }}</view>
          </view>
        </view>
        <view v-if="currentSelected">
          <view style="color: red">
            温馨提示：充值 {{ currentSelected }} 赠送{{
              currentSelected
            }}积分</view
          >
        </view>
        <view class="custom-amount">
          <!-- <u-input
            v-model="customMoney"
            placeholder="自定义金额"
            type="number"
          ></u-input> -->
          <view style="margin: 30rpx"></view>
          <u-button type="primary" @click="handleCustomRecharge"
            >确认充值</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
// <cardPopup v-model="state.on_of" title="充值" /> 使用实例
import {
  ref,
  defineProps,
  watch,
  toRaw,
  defineEmits,
  getCurrentInstance,
} from "vue";
const emit = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "选择充值金额",
  },
});
console.log(props);
const chongzhilist = ref([]);
const recharge_id = ref(null);
const currentSelected = ref(null);
const handleRecharge = (item, index) => {
  // 重置所有项的selected状态
  chongzhilist.value.forEach((item) => {
    item.selected = false;
  });

  // 设置当前项为选中状态
  chongzhilist.value[index] = {
    ...item,
    selected: true,
  };

  currentSelected.value = item.value;
  recharge_id.value = item.id;

  // 这里可以添加你的充值逻辑
  console.log("选择了充值金额：", item.value);
};

const popupClose = () => {
  //   props.on_of = false;
  emit("update:modelValue", false);
};
const openPopup = () => {
  proxy
    .$http({
      url: "WechatUserBalance/indexRechargeBalance",
    })
    .then((r) => {
      console.log(r);
      chongzhilist.value = r.data.data;
    });
};
const handleCustomRecharge = () => {
  // 发起支付请求
  proxy
    .$http({
      url:
        "WechatUserBalance/rechargeBalance?total_fee=" +
        currentSelected.value +
        "&trade_type=2" +
        "&recharge_id=" +
        recharge_id.value,
    })
    .then((r) => {
      console.log(r);
      let info = r.data.data;
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: info.timestamp,
        nonceStr: info.nonceStr,
        package: info.package,
        signType: "MD5",
        paySign: info.paySign,

        success: function (res) {
          if (res.code == 10000) {
            emit("update:modelValue", false);
            uni.showToast({
              title: "充值成功",
              //将值设置为 success 或者直接不用写icon这个参数
              icon: "success",
              //显示持续时间为 2秒
              duration: 2000,
            });
          }
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          uni.showToast({
            title: "充值失败请联系管理员",
            //将值设置为 success 或者直接不用写icon这个参数
            icon: "error",
            //显示持续时间为 2秒
            duration: 2000,
          });
          console.log("fail:" + JSON.stringify(err));
        },
      });
    });
};
</script>

<style lang="scss" scoped>
.recharge-popup {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .recharge-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-bottom: 40rpx;

    .recharge-item {
      padding: 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 10rpx;
      text-align: center;
      transition: all 0.3s;

      &.active {
        border-color: #2979ff;
        background-color: #f0f7ff;
        transform: scale(1.05);
        box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
      }

      .amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      .bonus {
        font-size: 24rpx;
        color: #ff6a00;
        margin-top: 5rpx;
      }
    }
  }

  .custom-amount {
    margin: 30rpx;
  }
}
</style>
